<template>
  <view class="u-td" :style="[tdStyle, customStyle]">
    <slot></slot>
  </view>
</template>

<script>
import mpConfig from '../../libs/mixin/mp-vertual-node.js'
  /**
   * td td单元格
   * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
   * @tutorial https://www.uviewui.com/components/table.html#td-props
   * @property {String Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
   * @example <u-td>二年级</u-td>
   */
  export default {
    name: "u-td",
    options: mpConfig,
    props: {
      // 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
      width: {
        type: [Number, String],
        default: 'auto'
      }
    },
    data() {
      return {
        tdStyle: {

        }
      }
    },
    mounted() {
      this.updateParentData()
      // this.parent在updateParentData()中定义
      this.parent.children.push(this);
    },
    methods: {
      setTdStyle() {
        let style = {}
        if (this.parent) {
          // 将父组件的相关参数，合并到本组件
          if (this.width != "auto") style.flex = `0 0 ${this.width}`;
          style.textAlign = this.parent.align;
          style.fontSize = this.parent.fontSize + 'rpx';
          style.padding = this.parent.padding;
          style.borderBottom = `solid 1px ${this.parent.borderColor}`;
          style.borderRight = `solid 1px ${this.parent.borderColor}`;
          style.color = this.parent.color;
          style.backgroundColor = this.parent.bgColor;
        }
        return style
      },
      updateParentData() {
        // 避免在created中去定义parent变量
        if(!this.parent) this.parent = false;
        this.parent = this.$u.$parent.call(this, 'u-table');
        const _tdStyle = this.setTdStyle()
        if(JSON.stringify(_tdStyle) !== JSON.stringify(this.tdStyle)){
          this.tdStyle = _tdStyle;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../libs/css/style.components.scss";

  .u-td {
    @include vue-flex(column);
    flex: 1;
    justify-content: center;
    font-size: 28rpx;
    color: $u-content-color;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 0;
    word-break: break-all;
    height: initial;
  }
</style>
